<script setup>

</script>

<template>
    <div class="box">
        
        <div class="title">校园易购(骑手端)</div>
        <div class="shang">
            <div class="zhong">
                <div class="tx">头像</div>
                <div class="zy">
                    <span>戴宗</span>
                    <span>1256659871</span>
                </div>
            </div>
        </div>
        <div class="we">
            <div>
                <span class="zi">12</span>
                <span>今日接单</span>
            </div>
            <div>
                <span class="zi">12</span>
                <span>今日收人</span>
            </div>
            <div>
                <span class="zi">12</span>
                <span>总收入</span>
            </div>
        </div>
        <div class="san">
            <div class="ww">
                <span>账单明细</span>
                <span>></span>
            </div>
            <div class="ww">
                <span>账单明细</span>
                <span>></span>
            </div>
            <div>
                <span>账单明细</span>
                <span>></span>
            </div>
        </div>
        <div class="end">
            <RouterLink to="/"><div>首页</div></RouterLink>
            <RouterLink to="/wode"><div>我的</div></RouterLink>
        </div>
    </div>
</template>

<style scoped>
.end{
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: #ccc 1px solid;
}
.ks{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border: 1px #ccc solid;
    border-radius: 50%;
}
.nr{
    display: flex;
    justify-content: center;
    height: 500px;
    align-items: center;
}
.title{
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    padding: 10px;
    border-bottom: #ccc 1px solid;
}
.box{
    width: 375px;
    border: 1px #ccc solid;
    margin: 0 auto;
    height: 700px;
}
a{
    color: black;
    text-decoration: none;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.shang{
    height: 100px;
    border-bottom: #ccc 1px solid;
    background-color: #eee;
}
.shang .zhong{
    display: flex;
    padding: 30px;
    gap: 20px;
    
}
.zhong .tx{
    margin-top: 15px;
}
.zhong .zy{
    display: flex;
    flex-direction: column;
    line-height: 30px;
}
.we{
    display: flex;
    justify-content: space-around;
    background-color: #eee;
    padding: 20px;
}
.we div{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.we .zi{
    font-size: 30px;
}
.we div span:nth-child(2){
    font-size:10px ;
}
.san{
    height: 410px;
    
}
.san div{
    display: flex;
    gap: 250px;
    line-height: 30px;
    border-bottom: #ccc 1px solid;
    padding: 20px;
}
.san div span:nth-child(2){
   font-size: 20px;
   color:#ccc
}
</style>
